<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<!-- 引入Vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
	<!--
      1.Vue中常用的按键别名：
          回车=>enter
          删除=>delete(捕获“删除”和“退格”键)
          退出=>esc
          空格=>space
          换行=>tab(特殊，必须配合keydown使用)（tab可以是元素失去焦点）
          上=>up
          下=>down
          左=>1eft
          右=>right

      2.Vue未提供别名的按键，可以使用按健原始的key值去绑定，但注意要转为kebab-case(短横线命名)

      3.系统修饰键（用法特殊）：ctrl、alt、shift、meta（win）
        (1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他健，事件才被触发。
        (2).配合keydown使用：正常触发事件。

      4.也可以使用keyCode去指定具体的按键（不推荐）

      5.Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名
  -->
	<!-- 准备一个容器 -->
	<div id="root">
		<h2>欢迎{{name}}</h2>
		<input placeholder="输入" @keyup.enter="showInfo"></input>
		<!-- 大小写不影响 -->
		<input placeholder="输入" @keyup.Enter="showInfo"></input>
		<!-- 切换大小写是两个单词，用短横线分开 -->
		<input placeholder="输入" @keyup.caps-lock="showInfo"></input>
		<!-- 测试ctrl keyup -->
		<input placeholder="输入" @keyup.ctrl="showInfo"></input>
		<!-- 测试ctrl keydown -->
		<input placeholder="输入" @keydown.ctrl="showInfo"></input>
		<!-- 测试ctrl+y keyup -->
		<input placeholder="输入" @keyup.ctrl.y="showInfo"></input>
		<!-- 测试keyCode 13一般是Enter 个别键盘可能不是 (不推荐)-->
		<input placeholder="输入" @keyup.13="showInfo"></input>
		<!-- 测试自定义键名 -->
		<input placeholder="输入" @keyup.huiche="showInfo"></input>

	</div>
</body>
<script type="text/javascript">
	Vue.config.productionTip = false
	Vue.config.keyCodes.huiche = 13
	new Vue({
		el: "#root",
		data: {
			name: '尚硅谷'
		},
		methods:
		{
			showInfo(event) {
				// console.log(event);
				// if (event.keyCode !== 13) return//keyCode废弃，各个键盘编码不同
				// if (event.key !== 'Enter') return
				console.log(event.target.value)
			},
		}
	})
</script>

</html>